﻿<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="singleCalendar.js"></script>
        <script src="fromToCalendar.js"></script>
        <style type="text/css">
            .important {
                color:red;
            }
        </style>
	</head>
	<body>
		<input type="text" id="txt_from" />
			to
		<input type="text" id="txt_to"/>双日历
		<br /><br />
		<!--<input type="text" id="txt_from_1" />
			to
		<input type="text" id="txt_to_1"/>-->
		<script type="text/javascript">
			new SelDates({fromDate:"txt_from", toDate:"txt_to", onselected:function(){
			    //alert(1);
				}});
			//new SelDates({fromDate:"txt_from_1", toDate:"txt_to_1",disabledDateColor:"red", onselected:function(){
				//alert($("txt_from").value + " - " + $("txt_to").value);
				//}});
		</script>
		
		<input type="text" id="text1" />单日历
		<!--<input type="text" id="text2" />-->
		<script type="text/javascript">
			new SingleCalendar({text_obj:"text1",bg:"#3c3c3c",year_month_bg:"#3c3c3c", onselected:function(){}});
			//new SingleCalendar({text_obj:"text2", onselected:function(){}});
		</script>

        <div id="instruction">
			<h3>API说明</h3>
			<p>1.引用此插件的地址</p>
			<p>2.创建一个新的此插件对象，可以使匿名的对象:new SelDates({fromDate:起始时间的textbox的ID, toDate:截止时间的textbox的ID});</p>
			<div id="item">
				3.参数设置：(*为必须设置)<br />
				<p><span class="important">*</span>fromDate: 起始时间<span class="important">（单月日历无效）</span></p>
				<p><span class="important">*</span>toDate: 截止时间<span class="important">（单月日历无效）</span></p>
				<p><span class="important">*</span>text_obj: 单月查询对象框的id<span class="important">（from_to模式无效）</span></p>
				<p>minYear: 能查询到的最小年份，默认从1990年开始</p>
				<p>extend_year: 从今年开始增加的年长，如设置为5，则能查询到未来5年的日历，默认为10</p>
				<p>split: 日期间隔符，默认为“-”</p>
				<p>bg: 整个日历的背景色，默认为#000</p>
				<p>year_month_bg: 年月日这栏的背景色</p>
				<p>year_month_color: 年月日的字体颜色</p>
				<p>foot_today: 今天日期的字体颜色</p>
				<p>current_month_date: 所选年月下的日期字体颜色</p>
				<p>not_current_month_date: 非所选年月下的日期字体颜色</p>
				<p>selectedbg: 已选日期的背景色</p>
				<p>selectedColor: 已选日期的字体颜色</p>
				<p>todayColor: 今天日期的字体颜色</p>
				<p>hoverColor:鼠标掠过日期时的字体颜色 </p>
				<p>hoverbg: 鼠标掠过日期时的背景色</p>
				<p>titleDisabledColor: 年月日栏中箭头不可用的字体颜色</p>
				<p>disabledDateColor:超出日期限制的字体颜色<span class="important">（单月日历无效）</span></p>
			</div>
		</div>
	</body>
</html>